<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>acf底部Cookie提示框</title>
</head>

<body>


  <div id="n-cookie">
    <div class="announcement-fixed">
      <div class="n-container">
        <div class="n-row">
          <!--内容部分-->
          <div class="n-content">
            <p>
              我们使用cookie为您提供更好的浏览体验、分析网站流量和个性化内容。了解我们如何使用Cookie，以及您如何在我们的Cookie政策中控制它们。如果您继续使用本网站，您同意我们使用cookie。
            </p>
          </div>
          <!--按钮部分-->
          <div class="n-buttom">
            <a id="confirm-eucookielaw" href="#" class="n-outline">Got it</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .announcement-fixed {
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;

      background: #4d5cf1;
      color: #fff;
      padding: 30px 0;
      box-shadow: 0 0 10px rgb(0 0 0 / 10%);
      z-index: 999;
    }

    .announcement-fixed .n-container {
      width: 90%;
      max-width: 1110px;
      margin: 0 auto;
    }

    .announcement-fixed .n-row {
      margin-left: -15px;
      margin-right: -15px;
    }

    /*文本*/
    .n-content {
      float: left;
      min-height: 1px;
      padding: 0 15px;
      width: 83.3333%;
    }

    .announcement-fixed p {
      margin: 0;
      font-size: 16px;
      line-height: 1.25;
    }

    /*按钮*/
    .n-buttom {
      float: left;
      min-height: 1px;
      padding: 0 15px;
      width: 16.6667%;
    }

    .n-outline {
      display: block;
      width: 100%;
      text-align: center;
      background: transparent;
      border: #00cba7 solid 1px;
      color: #00cba7;
      font-size: 15px;
      line-height: 1;
      padding: 15px 19px;
      border-radius: 3px;
      text-decoration: none;
    }

    .n-outline:hover {
      color: #00b192;
      border-color: #00b192;
    }

    @media (max-width: 640px) {
      .n-content {
        width: 100%;
      }

      .n-buttom {
        margin-top: 20px !important;
        width: 100%;
      }
    }
  </style>

  <script>
    //点击按钮隐藏
    function clearcon() {
      var obj = document.getElementById("n-cookie");
      obj.innerHTML = "";
    }

    var btn = document.getElementById("confirm-eucookielaw");

    btn.onclick = function () {
      clearcon();
    };
  </script>
</body>

</html>